<template>
  <div class="contain">
    <el-card style="margin: 20px">
      <el-form>
        <el-form-item>
          <el-input
            v-model.trim="searFrom.title"
            style="width: 200px; margin-right: 15px"
            placeholder="请输入用户搜索"
            size="small"
          />
          <el-button size="small" @click="handelMationClean">清空</el-button>
          <el-button type="primary" size="small" @click="getPermisionList">
            搜索
          </el-button>
          <el-button
            type="success"
            class="right"
            size="small"
            @click="addDialogShow"
          >
            新增权限组
          </el-button>
        </el-form-item>
      </el-form>
      <!-- 提示文案 -->
      <el-alert type="info" :closable="false">
        <i class="el-icon-info" />共{{ total }}条记录</el-alert
      >
      <!-- 表单区域 -->
      <el-table :data="userList">
        <el-table-column type="selection" width="55" />
        <el-table-column label="用户名" prop="title" />
        <el-table-column label="创建日期" prop="create_date" />
        <el-table-column label="修改日期" prop="update_date" />

        <el-table-column label="操作">
          <template #default="{ row }">
            <div>
              <el-button
                type="primary"
                icon="el-icon-edit"
                circle
                @click="handelRestUser(row)"
              />
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                @click="handelDeletePersion(row)"
              />
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="block">
        <el-pagination
          :current-page="searFrom.page"
          :page-sizes="[5, 8, 10, 15]"
          :page-size="searFrom.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <!-- 新增用户提示框 -->
    <AddPermision
      :show-dialog.sync="showDialog"
      @add-success="getPermisionList"
    />

    <!-- 编辑用户弹框 -->
    <edit-permision
      :show-dialog.sync="showeditDialog"
      :edit-form="editForm"
      @add-success="getPermisionList"
    />
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { getPermissionInfoListAPI, delPermisionAPI } from '@/api/permissions'
import AddPermision from './components/addPermision.vue'
import EditPermision from './components/editPermision.vue'
export default {
  name: 'Permission',
  components: { AddPermision, EditPermision },
  data() {
    return {
      // 新增用户组件是否显示
      showDialog: false,
      showeditDialog: false,
      // 搜索表单对象
      searFrom: {
        page: 1,
        pagesize: 10,
        title: ''
      },
      userList: [],
      total: 0,
      editForm: {}
    }
  },
  created() {
    this.getPermisionList()
  },
  methods: {
    // 当条数改变时
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.searFrom.pagesize = val
      this.getPermisionList()
    },
    // 当页数改变时
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.searFrom.page = val
      this.getPermisionList()
    },
    // 打开新增用户提示框
    addDialogShow() {
      this.showDialog = true
    },
    // 删除权限组
    async handelDeletePersion(perDate) {
      try {
        await this.$confirm('确定删除此权限组吗？', '温馨提示', {
          type: 'warning'
        })
        await delPermisionAPI(perDate.id)
        this.$message.success('删除成功👌')
        // console.log(resp)
        this.getPermisionList()
      } catch (error) {
        console.log(error)
      }
    },
    // 清空表单
    handelMationClean() {
      this.searFrom.title = ''
      this.getPermisionList()
    },
    // 获取权限组列表
    async getPermisionList() {
      const { data } = await getPermissionInfoListAPI(this.searFrom)
      // console.log(data)
      this.userList = data.list
      // 日期格式转换
      this.userList.forEach((item) => {
        item.update_date = dayjs(item.update_date).format('YYYY-MM-DD')
        item.create_date = dayjs(item.create_date).format('YYYY-MM-DD')
      })
      this.total = data.counts
    },
    // 打开编辑用户提示框
    handelRestUser(e) {
      this.showeditDialog = true
      // console.log('e', e)
      this.editForm = e
    }
  }
}
</script>

<style lang="scss" scoped>
.right {
  margin-left: 55%;
}
.block {
  text-align: right;
  margin-top: 25px;
}
.el-icon-info {
  margin-right: 10px;
  font-size: 15px;
}
.el-alert {
  height: 40px;
  line-height: 20px;
}
.el-table {
  margin-top: 15px;
}
.el-table tr {
  background: #ccc;
}
</style>

